<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Shark</title>
	<link rel="stylesheet" type="text/css" href="static/css/reset.css" />
	<link rel="stylesheet" type="text/css" href="static/css/default.css">
	<link rel="stylesheet" type="text/css" href="static/css/styles.css">
	<link rel="stylesheet" type="text/css" href="static/css/jquery-ui.css">
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<div id="show">
				<a  href="javascript:;" title="didi" >
					<img src="media/img/didi.png" style="width:100px" alt="item" />
				</a>

			</div>
			<h1>Shark <span>team 1</span></h1>
			<div id="inputinfo" style="display:none">
				IP地址 <input id="ipaddr" type="text" name="fname1" value="192.168.2.131:8887"/>
				用户ID <input id="userid" type="text" name="fname2" value="123"/>
				商品ID <input id="productid" type="text" name="fname3" value="111"/>
			</div>
		</header>
		<!-- wrapper -->
		<div class="wrapper">
		    <h1 class="title">秒杀商品</h1>
		 	<span class="car"><i class="shopping-cart"></i></span>

		    <div class="clear"></div>
		    <!-- items -->
		    <div class="items">
		        <!-- single item -->
		        <div class="item">
		            <img src="media/img/che.jpg" height="200"  alt="item" />
		             <h2>豪华跑车</h2>

		            <p>价格: <em>￥1</em>
		            </p>
		            <button id="queryall" class="add-to-cart" type="button">查询全部</button>
		            <button id="queryuser" class="add-to-cart" type="button">查询用户</button>

		            <button id="startkilling" class="add-to-cart" type="button">开始秒杀</button>
		        </div>
		        <!--/ single item -->
		        <!-- single item -->
<!-- 		        <div class="item">
		            <img src="img/htc-ozone.jpg" alt="item" />
		             <h2>htc-ozone</h2>

		            <p>价格: <em>￥1</em>
		            </p>
		            <button class="add-to-cart" type="button">开始秒杀</button>
		        </div>
		        <div class="item">
		            <img src="img/motorola-backflip.jpg" alt="item" />
		             <h2>motorola-backflip</h2>

		            <p>价格: <em>￥1</em>
		            </p>
		            <button class="add-to-cart" type="button">开始秒杀</button>
		        </div> -->
		        <!--/ single item -->
		    </div>
		    <!--/ items -->
		</div>
		<!--/ wrapper -->
		<div id="dialog" title="提示信息">
		  <p id="content" style="word-wrap: break-word"></p>
		</div>

	</div>
	
	<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="static/js/jquery-2.1.1.min.js"><\/script>')</script>
	<script src='static/js/jquery-ui.min.js'></script>
	<script>
	var host = "http://" + $('#ipaddr').val();
	var userid = $('#userid').val();
	var productid = $('#productid').val();

	$(function(){
		  $( "#dialog" ).dialog({
	      autoOpen: false,
	      show: {
	        effect: "blind",
	        duration: 200
	      },
	      hide: {
	        effect: "blind",
	        duration: 200
	      },
	      height:300,
	      width:600,
	      resizable: true,
	        modal: true, //蒙层
	        overlay: { opacity: 0.5,
	            background: "black",
	            overflow: 'auto'
	        },
	      close: function(event, ui) {
	      	$('#content').html('')} 
	    });

        var count = 2;
        var countdown = setInterval(CountDown, 1000);
		$("#startkilling").attr("disabled", true);
        function CountDown() {
            $("#startkilling").html("离开始还有" + count + " 秒");
            if (count == 0) {
                $("#startkilling").removeAttr("disabled");
                clearInterval(countdown);
                $("#startkilling").html("开始秒杀");
            }
            count--;
        }
	})

	$('#show').on('click', function () {
	      	$('#inputinfo').toggle("fast");

	});
	$('#startkilling').on('click', function () {
		host = "http://" + $('#ipaddr').val();
		userid = $('#userid').val();
		productid = $('#productid').val();
	      $.get(host + "/shark/seckilling?userid="+userid+"&productid="+productid, 
	      	function(result){
			$("#content").html(result);
			$( "#dialog" ).dialog("open");
		  });

	});
	$('#queryuser').on('click', function () {
		host = "http://" + $('#ipaddr').val();
		userid = $('#userid').val();
		productid = $('#productid').val();
	      $.get(host + "/shark/queryUserSeckillingInfo?userid="+userid+"&productid="+productid, 
	      	function(result){
			$("#content").html(result);
			$( "#dialog" ).dialog("open");
		  });
	});
	$('#queryall').on('click', function () {
		host = "http://" + $('#ipaddr').val();
		userid = $('#userid').val();
		productid = $('#productid').val();
	      $.get(host + "/shark/queryProductSeckillingInfo?productid="+productid, 	      	
	      	function(result){
			$("#content").html(result);
			$( "#dialog" ).dialog("open");
		  });
	});
	</script>
</body>
</html>